<template>
  <uni-badge class="van-badge"
             :is-dot="dot"
             :text="content"
             :max-num="Number(max)"
             :custom-style="customStyle"
             absolute="rightTop"
             size="small">
    <slot></slot>
  </uni-badge>
</template>

<script setup>
import {toRefs, ref} from 'vue';

const show = ref(false)
const props = defineProps({
  content: {
    type: Number,
    default: 1
  },
  max: {
    type: [Number, String],
    default: 99
  },
  dot: {
    type: Boolean,
    default: false
  },
  customStyle: {
    type: Object,
    default: () => {
    }
  }
})
const {content, max, dot, customStyle} = toRefs(props)
</script>

<style lang="scss" scoped>
.dropdown-item {
  text-align: center;

  .dropdown-item-show {
    font-size: 28rpx;
  }

  .uni-icons {
    margin-left: 8rpx;
  }

  .dropdown-popup {
    position: fixed;
    left: 0;
    top: -100vh;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    transition: all 0.2s;
    opacity: 0;
    z-index: -1;

    &.active {
      opacity: 1;
      z-index: 99;
      top: auto;
    }
  }

  .dropdown-popup-body {
    width: 100%;
    padding: 6px 0;
    background: #fff;
  }

  .dropdown-popup-list-item {
    font-size: 26rpx;
    padding: 6px 15px;
    text-align: left;
    color: #333;

    &.active {
      color: var(--color);
    }
  }
}
</style>